<!DOCTYPE html>
<html lang="en" ng-app>

<head>
    <meta charset="UTF-8">
    <title>我的信息</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/font-awesome.css" rel="stylesheet">
    <link href="./css/main.css" rel="stylesheet">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/jquery.pin.js"></script>
    <script src="./js/jquery.complexify.js"></script>
    <script src="./js/jquery.placeholder.min.js"></script>
	<script src="js/angular.min.js"></script>
	
    <style>
        .title {
            margin: 20px 0;
            font-size: 20px;
            font-weight: bold;
            font-family: Arial;
            color: #505050;
        }
        .text {
            margin: 20px 0;
            font-size: 14px;
            font-weight: bold;
            font-family: Arial;
            color: #505050;
        }
        input {
            width: 290px;
            height: 30px;
            box-shadow: 0px 0px 10px #303030;
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
            margin: 0;
            padding: 0 5px;
            border: 1px solid #ccc;
            font-family: Arial;
        }
        #complexitywrap {
            border: 1px solid #C5C5C5;
            padding: 0;
            margin: 0px 0;
            border-radius: 5px;
        }
        #complexity {
            padding: 5px 5px;
            font-size: 12px;
            font-weight: bold;
            margin: 0;
            box-shadow: 0px 0px 5px #303030;
            border-radius: 5px;
            color: #CCC;
        }
        .valid {
            background: green;
        }
        .invalid {
            background: red;
        }
    </style>
    
    <script>
	$(function(){
			$('input[placeholder]').placeholder();
			$("#newpassword").complexify({}, function(valid, complexity){
				if (!valid) {
					$('#complexity').animate({'width':complexity + '%'}).removeClass('valid').addClass('invalid');
				} else {
					$('#complexity').animate({'width':complexity + '%'}).removeClass('invalid').addClass('valid');
				}
				$('#complexity').html(Math.round(complexity) + '%');
			});
		});
	</script>
</head>

<body ng-controller="teacherEditInfo">

    <!--导航栏-->
    <div class="navbar navbar-njust navbar-fixed" role="navigation">
        <div class="container clearfix">
            <div class="navbar-header">

                <div class="navbar-brand">
                    <i class="fa fa-cubes"></i>
                    <h4 id="maintitle">课程考试系统</h4>
                </div>
            </div>

            <div class="navbar-collapse collapse">

                <ul class="nav navbar-nav" style="margin-left:200px">
                    <li class="pull-left">
                        <a href="home.html">首页</a>
                    </li>
                    <li class="pull-left">
                        <a href="teacher.html#">教师页面</a>
                    </li>
                    <li class="pull-left">
                        <a href="EditExam.html">新建考试</a>
                    </li>
					<li class="pull-left active">
                        <a href="questionbank.html">增加题目</a>
                    </li>
                </ul>
				
                <div class="list-unstyled pull-right clearfix dropdown" style="margin-top:25px">
                    <li class="dropdown-toggle " id="dropdownMenu1" data-toggle="dropdown">
                        <a href="" style="width:200px">欢迎您，{{teacher.name}}老师</a> 
                    </li>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">我的账户</a>
                        </li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">注销</a>
                        </li>
                    </ul>

                </div>
            </div>
        </div>

    </div>

    <div class="container">
        <div class="row">


            <div class="row" style="margin-top:100px">
                <div class="col-md-6">
                    <img src="img/haha.jpg" alt="" class="img-rounded" style="width:100%">
                </div>

                <div class="col-md-6">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="title">用户名：{{teacher.name}}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="title col-md-6">密码：**************
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-info" id="editpass" style="margin:20px">修改</button>

                        </div>


                        <div id="page-wrap" style="display:none" class="col-md-12">
                            <div class="row">
                                <div class="col-md-12" style="padding-top:3px;padding-bottom:3px">
                                    <span class="text">请输入原密码：</span>
                                    <input type="password" name="password" placeholder="" id="pass1" ng-model="p"/>
                                </div>
                                <div class="col-md-9" style="padding-top:3px;padding-bottom:3px">
                                    <span class="text">请输入新密码：</span>
                                    <input type="password" name="password" id="newpassword" 
										placeholder="新密码"ng-model="p1" />
                                </div>

                                <div id="complexitywrap" class="col-md-2">
                                    <div id="complexity">0%</div>
                                </div>
                                <div class="col-md-12" style="padding-top:3px;padding-bottom:3px">
                                    <span class="text">再输入新密码：</span>
                                    <input type="password" name="password" placeholder="" 
										id="pass2" ng-model="p2"/>
                                </div>
                                <div class="col-md-8">
                                    <button class="btn btn-success pull-right" id="confirmpass" style="margin:20px" onclick="changePassword()" 
										ng-click="changePassword()">确定</button>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="title">电话：
                                {{teacher.contact}}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-info" style="margin:20px" id="edittele">修改</button>

                        </div>
                        <div>

                        </div>
                        <div class="col-md-6" style="padding-top:3px;padding-bottom:3px;display:none" id="tele">
                            <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" name="password" placeholder="新电话"  id="phone" ng-model="tmp.contact"/>
                        </div>
                        <div class="col-md-4" style="display:none;" id="confirm1">
                            <button class="btn btn-success"  ng-click="changeInfo()">确定</button>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="title">学校：
                                {{teacher.college}}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-info" style="margin:20px" id="editemail">修改</button>
                        </div>
                        
                        <div class="col-md-6" style="padding-top:3px;padding-bottom:3px;display:none" id="email">
                            <input name="password" id="email1" ng-model="tmp.college"/>
                        </div>
                        <div class="col-md-4" style="display:none;" id="confirm2">
                            <button class="btn btn-success"  ng-click="changeInfo()">确定</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="title">工号：{{teacher.teacherNo}}
                            </div>
                        </div>
                    </div>
                    


                </div>
            </div>



        </div>
    </div>
    
     <!--页脚-->
    <footer class="footer clearfix">
        <div class="container">
            <ul class="list-unstyled list-inline pull-left">
                <li>
                    <a href="#">FAQ</a>
                </li>
                <li>
                    <a href="#">Git</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
            </ul>
            <p class="pull-right">@ 2014 软件项目管理团队</p>

        </div>
    </footer>


    <script>
        $("#editpass").click(function () {
            $("#page-wrap").toggle("slow");
        });
        $("#edittele").click(function () {
            $("#tele").toggle("slow");
            $("#confirm1").toggle("slow");
        });
        $("#editemail").click(function () {
            $("#email").toggle("slow");
            $("#confirm2").toggle("slow");
        });
    </script>

	<script>
		function teacherEditInfo($scope,$http){
			var teacher = new Object() , tmp = new Object();
			$scope.teacher = teacher;
			
			//static data
			teacher.name = "hdd";
			teacher.contact = "12345678";
			teacher.college= "南理工";
			teacher.password = "111111";
			teacher.teacherNo = "12345";
			$scope.tmp = tmp = angular.copy(teacher);
			
			$http.get("teacher!getInfo.action").success(function(data){
				$scope.teacher = teacher = angular.copy(data.teacher);
			}).error(function(){
				//alert('wocao fail');
			});
			
			$scope.changeInfo = function(){
				$scope.teacher = teacher = angular.copy(tmp);
				//$http.post
			}
			$scope.changePassword = function(){
				if ( $scope.p == teacher.password ){
					if ( $scope.p1 == $scope.p2 ) {
						teacher.password = $scope.p1;
						alert("修改成功");
					}
					else alert("两次密码输入不同！");
				}
				else alert("输入与原密码不同！");
				$scope.p1 = $scope.p2 = $scope.p = '';
			}
		}
	</script>
	
</body>

</html>